<template>
	<view>
		<view class="cu-card article">
			<view class="cu-item shadow" v-for="(item,index) in chatList" :key="index">
				
				<view class="title"><view class="text-cut">聊天名称-{{item.name}}</view></view>
				
				<view class="content">
					<view class="desc">
						<view class="text-content"> 
							聊天会话ID:{{item.id}}<br/>
							密钥:<span style="font-weight:600;" v-if="item.secondKey">{{item.secondKey}}</span><span class="text-red" style="font-weight:600;" v-if="!item.secondKey">密钥丢失</span><br/>
							建立时间:{{item.createTime}}<br/>
						</view>
						<view class="text-content">
							已有人数:{{item.userList.length}}<br/>
							最大人数:{{item.amount}}<br/>
							是否建立聊天:<view class='cu-tag round' :class="{'bg-green':item.isEst,'bg-red':!item.isEst}">{{item.isEst?'已建立':'未建立'}}</view><br/>
						</view>
						<view class="grid col-4">
							<view class=" margin-tb-sm" v-if="!item.secondKey" @click="reGet(item)">
								<button class="cu-btn round bg-green shadow">复钥</button>
							</view>
							<view class=" margin-tb-sm" @click="delKey(item)">
								<button class="cu-btn round bg-red shadow">弃钥</button>
							</view>
							<!-- <view class=" margin-tb-sm text-center">
								<button class="cu-btn round bg-red shadow">摧毁</button>
							</view> -->
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<tui-modal :zIndex="100" :maskZIndex="90" :show="reGetVis" :maskClosable="true" custom>
			<view class="tui-modal-custom">
				<view class="tui-modal-custom-text" style="text-align: center; font-size:18px;">输入密钥</view>
				<label>输入密钥:</label>
				<input class="zy-input" label="密钥" placeholder="请输入密钥(口令)" clearable v-model="form.secondKey"></input>
				<tui-button height="72rpx"  class="zy-button" :size="28" type="danger" shape="circle" @click="verifySecondKey()">确定</tui-button>
				<tui-button height="72rpx" class="zy-button" :size="28" shape="circle" style="margin-top:10px " @click="reGetVis=false">关闭</tui-button>
			</view>
		</tui-modal>
	</view>
</template>

<script>
	import md5 from 'md5';
	export default {
		data() {
			return {
				chatList:[],
				form:{
					secondKey:"",
					chatId:""
				},
				reGetVis:false
			};
		},
		async created(){
			this.getList();
		},
		methods:{
			async getList(){
				let res = await this.api.public.getListMan();
				this.chatList = res.data;
				this.chatList.forEach(item=>{
					let secondKey = uni.getStorageSync(item.id);
					item.secondKey = secondKey;
				})
			},
			delKey(item){
				uni.showModal({
					title:'删除密钥?',
					content:'真的确定删除密钥吗？此后您将会继续在此聊天内，但无法解密他人发的任何内容，您发的内容也将会以明文展示',
					success:(res)=>{
						if(res.confirm){
							uni.setStorageSync(item.id,null);
							this.getList();
						}
					},
					fail:()=>{
						return;
					}
				});
			},
			reGet(item){
				this.form.chatId = item.id;
				this.reGetVis = true;
			},
			async verifySecondKey(){
				let id = this.form.chatId;
				let res = await this.api.public.verifySecondKey({
					chatId:this.form.chatId,
					secondKey:md5(this.form.secondKey)
				});
				if(res.status){
					this.reGetVis = false;
					uni.setStorageSync(id,this.form.secondKey)
					this.form.secondKey = "";
					this.form.chatId = "";
					this.getList();
				}
				uni.showToast({
					title:res.content,
					duration:3000,
					icon:"none"
				});
			}
		}
	}
</script>

<style lang="scss">
	.zy-input{
		margin:10px auto;
		border:1px solid #666;
		padding:5px;
		border-radius:10px;
		height:20px;
		font-size:16px;
		box-sizing: content-box;
	}
	label{
		font-size:16px;
	}
	uni-toast {
		z-index: 10000;
	}
	.zy-button{
		text-align: center;
		margin-left:auto;
		margin-right:auto;
		width:200rpx;
	}
</style>
